<!--
 * @Author: your name
 * @Date: 2021-07-16 17:13:37
 * @LastEditTime: 2021-07-19 17:07:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \project-128-10\src\module-hmmm\components\tables.vue
-->
<template>
  <div>
    <el-alert
      type="info"
      :closable="false"
      show-icon
    >
    <template #title>
      {{`数据一共${total}条`}}
    </template>
    </el-alert>
    <!-- 表格 -->
    <div class="tables">
      <el-table
        border
        style="width: 100%"
        :data="choiceList"
      >
        <el-table-column
          prop="number"
          label="试题编号"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录"
          width="120"
        >
        </el-table-column>
        <el-table-column
          label="题型"
          width="120"
        >
          <template #default="scope">
            {{forQuestionType(scope.row.questionType)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="question"
          label="题干"
          width="230"
        >
          <template #default="{row}">
            <p v-html="row.question"></p>
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          width="200"
        >
          <template #default="scope">
            {{forDate(scope.row.addDate)}}
          </template>
        </el-table-column>
        <el-table-column
          label="难度"
          width="120"
        >
          <template #default="scope">
            {{forDifficulty(scope.row.difficulty)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="150"
        >
        </el-table-column>
        <el-table-column
          label="审核状态"
          width="120"
        >
          <template #default="scope">
            {{forchkStart(scope.row.chkState)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核建议"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="chkUser"
          label="审核人"
          width="150"
        >
        </el-table-column>
        <el-table-column
          label="发布状态"
          width="150"
        >
          <template #default="{row}">
            {{forpublishStart(row.publishState)}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="preview(scope.row)"
            >预览</el-button>
            <el-button
              type="text"
              size="mini"
              @click="audit(scope.row.id)"
              :disabled="scope.row.chkState === 1"
            >审核</el-button>
            <el-button
              type="text"
              size="mini"
           @click="modification(scope.row.id)"
            >修改</el-button>
            <el-button
              type="text"
              size="mini"
              @click="putaway(scope.row)"
            >{{scope.row.publishState === 0 || scope.row.publishState === 2? '上架':'下架'}}</el-button>
            <el-button
              type="text"
              size="mini"
              @click="delSubject(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <!-- 预览弹出层组件 -->
      <preview
        :previewData="previewData"
        class="dialog"
        v-model="previewDialog"
      />
      <!-- 审核组件 -->
      <audit
        @upTableList="upTableList"
        :auditId="auditId"
        v-model="autidDialog"
      />
    </div>

  </div>
</template>

<script>
// 精品题库上下架接口
import { choicePublish } from '@/api/JXTK/questions.js'
// 获取过滤时间的函数
import { parseTime } from '@/utils/index.js'
import {
  QuestionType,
  chkState,
  Difficulty,
  PublishState
} from '@/module-hmmm/Boutique/handle.js'
export default {
  props: {
    choiceList: {
      type: Array,
      default () {
        return []
      }
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      previewDialog: false,
      autidDialog: false,
      previewData: {},
      auditId: '',
      publishState: ''

    }
  },
  mounted () {
  },
  methods: {

    // 处理题型
    forQuestionType (type) {
      return QuestionType[type]
    },
    // 时间格式化处理
    forDate (date) {
      return parseTime(date)
    },
    // 审核状态处理
    forchkStart (start) {
      return chkState[start]
    },
    // 处理难度
    forDifficulty (difficulty) {
      return Difficulty[difficulty]
    },
    // 处理发布状态
    forpublishStart (publishState) {
      return PublishState[publishState]
    },
    // 点击预览按钮
    preview (data) {
      this.previewDialog = true
      this.previewData = data
    },
    // 点击审核
    audit (id) {
      this.autidDialog = true
      this.auditId = String(id)
    },
    // 点击修改
    modification (id) {
      // 1、跳转到试题录入页面
      this.$router.push({
        path: `/questions/new?Pid=${id}`
        // query: {
        //   Pid: id
        // }
      })
    },
    // 点击下架按钮
    putaway (row) {
      // console.log(row)
      //  1、提示用户是否上架或下架这个题目
      this.$confirm(`你确定要${row.publishState === 0 || row.publishState === 2 ? '上架' : '下架'}这个试题吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (row.publishState === 1) {
            // 2、 上架状态 点击按钮下架
            this.publishState = 0
          } else {
            this.publishState = 1
          }
          // 3、 调用上下架接口
          const res = await choicePublish({ id: row.id, publishState: this.publishState })
          console.log(res)
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          // 4、重新获取列表数据
          this.upTableList()
        })
      // console.log(row)
    },
    // 更新列表数据
    upTableList () {
      this.$emit('upChoiceList')
    },
    // 点击删除按钮
    delSubject (id) {
      this.$emit('delSubject', id)
    }
  }
}
</script>

<style>
.tables {
  margin-top: 10px;
}
</style>
